﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Columns padding and spacing example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Position: 0, Serie1: 30, Serie2: 5, Serie3: 25, Serie4: 30, Serie5: 10, Serie6: 5 },
                    { Position: 1, Serie1: 25, Serie2: 25, Serie3: 5, Serie4: 20, Serie5: 20, Serie6: 10 },
                    { Position: 3, Serie1: 30, Serie2: 5, Serie3: 25, Serie4: 10, Serie5: 20, Serie6: 15 },
                    { Position: 6, Serie1: 35, Serie2: 25, Serie3: 45, Serie4: 5, Serie5: 30, Serie6: 20 },
                    { Position: 7, Serie1: 5, Serie2: 20, Serie3: 25, Serie4: 20, Serie5: 40, Serie6: 15 },
                    { Position: 9, Serie1: 30, Serie2: 10, Serie3: 30, Serie4: 10, Serie5: 5, Serie6: 20 },
                    { Position: 10,  Serie1: 60, Serie2: 45, Serie3: 10, Serie4: 20, Serie5: 10, Serie6: 15 }
                ];

            // prepare jqxChart settings
            var seriesGroups =
            [
                {
                    type: 'column',
                    columnsGapPercent: 25,
                    seriesGapPercent: 10,
                    columnsMaxWidth: 40,
                    columnsMinWidth: 1,
                    skipOverlappingPoints: false, // change to true if you want to prevent adjacent columns overlap
                    series: [
                            { dataField: 'Serie1', displayText: 'Serie1' },
                            { dataField: 'Serie2', displayText: 'Serie2' },
                            { dataField: 'Serie3', displayText: 'Serie3' }
                        ]
                },
                {
                    type: 'column',
                    greyScale: true,
                    columnsGapPercent: 25,
                    seriesGapPercent: 10,
                    columnsMaxWidth: 40,
                    columnsMinWidth: 1,
                    skipOverlappingPoints: false, // change to true if you want to prevent adjacent columns overlap
                    series: [
                            { dataField: 'Serie4', displayText: 'Serie4' },
                            { dataField: 'Serie5', displayText: 'Serie5' },
                            { dataField: 'Serie6', displayText: 'Serie6' }
                        ]
                }
            ];

            var currentSeriesGroups = [];
            currentSeriesGroups.push(seriesGroups[0]);

            var chartSettings = {
                title: "Columns spacing and padding",
                description: "Example with two series groups and three series in each group",
                enableAnimations: false,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                columnSeriesOverlap: true, // change to true if you want the columns in the two series groups to overlap
                xAxis:
                {
                    dataField: 'Position',
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    gridLines: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    flip: false,
                    valuesOnTicks: false
                },
                valueAxis:
                {
                    unitInterval: 10,
                    title: {text: 'Value'},
                    tickMarks: {color: '#BCBCBC'},
                    gridLines: {color: '#BCBCBC'},
                    labels: {
                        horizontalAlignment: 'right'
                    },
                },
                colorScheme: 'scheme04',
                seriesGroups: currentSeriesGroups
            };

            // setup the chart
            $('#chartContainer').jqxChart(chartSettings);
            var chartInstance = $('#chartContainer').jqxChart('getInstance');


            // enable series groups
            $("#btnEnableSeriesGroup1").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: true});
            $("#btnEnableSeriesGroup1").on('change', function (event) {
                    updateSeriesGroupsVisibility();
                });

            $("#btnEnableSeriesGroup2").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: false});
            $("#btnEnableSeriesGroup2").on('change', function (event) {
                updateSeriesGroupsVisibility();
            });

            function updateSeriesGroupsVisibility()
            {
                chartInstance.seriesGroups = [];
                if ($("#btnEnableSeriesGroup1").jqxCheckBox('checked'))
                    chartInstance.seriesGroups.push(seriesGroups[0]);
                if ($("#btnEnableSeriesGroup2").jqxCheckBox('checked'))
                    chartInstance.seriesGroups.push(seriesGroups[1]);

                updateSeriesGroupsStacking();
            }

            // stack series groups
            $("#btnStackedSeriesGroup1").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: false});
            $("#btnStackedSeriesGroup1").on('change', function (event) {
                    updateSeriesGroupsStacking();
                });

            $("#btnStackedSeriesGroup2").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: false});
            $("#btnStackedSeriesGroup2").on('change', function (event) {
                updateSeriesGroupsStacking();
            });

            function updateSeriesGroupsStacking()
            {
                if ($("#btnEnableSeriesGroup1").jqxCheckBox('checked'))
                {
                    if ($("#btnStackedSeriesGroup1").jqxCheckBox('checked'))
                        chartInstance.seriesGroups[0].type = 'stackedcolumn';
                    else
                        chartInstance.seriesGroups[0].type = 'column';
                }

                if ($("#btnEnableSeriesGroup2").jqxCheckBox('checked'))
                {
                    if ($("#btnStackedSeriesGroup2").jqxCheckBox('checked'))
                        chartInstance.seriesGroups[chartInstance.seriesGroups.length - 1].type = 'stackedcolumn';
                    else
                        chartInstance.seriesGroups[chartInstance.seriesGroups.length - 1].type = 'column';
                }

                chartInstance.refresh();
            }

            // columns spacing
            $('#sliderColumnsGapPercentGroup1').jqxSlider({ min: 0, max: 99, ticksFrequency: 5, value: 25, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    seriesGroups[0].columnsGapPercent = event.args.value;
                    chartInstance.refresh();
                });

            $('#sliderColumnsGapPercentGroup2').jqxSlider({ min: 0, max: 99, ticksFrequency: 5, value: 25, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    seriesGroups[1].columnsGapPercent = event.args.value;
                    chartInstance.refresh();
                });

            // series spacing
            $('#sliderSeriesGapGroup1').jqxSlider({ min: 0, max: 100, ticksFrequency: 5, value: 10, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    seriesGroups[0].seriesGapPercent = event.args.value;
                    chartInstance.refresh();
                });

            $('#sliderSeriesGapGroup2').jqxSlider({ min: 0, max: 100, ticksFrequency: 5, value: 10, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    seriesGroups[1].seriesGapPercent = event.args.value;
                    chartInstance.refresh();
                });

            // min column width
            $('#sliderMinWidthGroup1').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    seriesGroups[0].columnsMinWidth = event.args.value;
                    chartInstance.refresh();
                });

            $('#sliderMinWidthGroup2').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    seriesGroups[1].columnsMinWidth = event.args.value;
                    chartInstance.refresh();
                });

            // max column width
            $('#sliderMaxWidthGroup1').jqxSlider({ min: 1, max: 120, ticksFrequency: 20, value: 40, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    seriesGroups[0].columnsMaxWidth = event.args.value;
                    chartInstance.refresh();
                });

            $('#sliderMaxWidthGroup2').jqxSlider({ min: 1, max: 120, ticksFrequency: 20, value: 40, step: 1, mode: 'fixed', width: '250px' })
                .on('change', function (event) {
                    seriesGroups[1].columnsMaxWidth = event.args.value;
                    chartInstance.refresh();
                });

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px">
    </div>

    <table style="padding-left: 30px; padding-top: 10px;">
        <tr style="height:50px;">
            <td style="width:300px"><b>Series group 1:</b></td>
            <td><b>Series group 2:</b></td>
        </tr>
        <tr>
            <td>
            <div id="btnEnableSeriesGroup1">Visible</div>
            </td>
            <td>
            <div id="btnEnableSeriesGroup2">Visible</div>
            </td>
        </tr>
        <tr>
            <td>
            <div id="btnStackedSeriesGroup1">Stacked</div>
            </td>
            <td>
            <div id="btnStackedSeriesGroup2">Stacked</div>
            </td>
        </tr>
        <tr>
            <td>Space between columns / padding:<div id="sliderColumnsGapPercentGroup1"></div></td>
            <td>Space between columns / padding:<div id="sliderColumnsGapPercentGroup2"></div></td>
        </tr>
        <tr>
            <td>Space between series:<div id="sliderSeriesGapGroup1"></div></td>
            <td>Space between series:<div id="sliderSeriesGapGroup2"></div></td>
        </tr>
        <tr>
            <td>Minimum column width:<div id="sliderMinWidthGroup1"></div></td>
            <td>Minimum column width:<div id="sliderMinWidthGroup2"></div></td>
        </tr>
        <tr>
            <td>Maximum column width:<div id="sliderMaxWidthGroup1"></div></td>
            <td>Maximum column width:<div id="sliderMaxWidthGroup2"></div></td>
        </tr>
    </table>

</body>
</html>
